<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-06-02 11:05:19
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:48:35
 * @FilePath: \nien-vue3-admin\src\views\BusinessConfiguration\sellPriceManagement\components\EmailPartition.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog 
    v-model="visible"
    title="设置邮编分区"
    width="960px"
  >
    <el-button type="primary" :style="{'margin-bottom': '16px'}" @click="handleAdd">增加</el-button>
    <el-form ref="formRef" :model="formData">
      <el-table :data="formData.tableData">
        <el-table-column label="开始邮编" prop="postcodeStart">
          <template #default="{$index, row}">
            <div class="form-item-wrapper">
              <el-form-item :prop="`tableData.${$index}.postcodeStart`" :rules="[{required: true, message:'必填', trigger: 'blur'}]">
                <el-input v-model="row.postcodeStart" type="text"></el-input>
              </el-form-item>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="结束邮编" prop="postcodeEnd">
          <template #default="{$index, row}">
            <div class="form-item-wrapper">
              <el-form-item :prop="`tableData.${$index}.postcodeEnd`" :rules="[{required: true, message:'必填', trigger: 'blur'}]">
                <el-input v-model="row.postcodeEnd" type="text"></el-input>
              </el-form-item>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template #default="{$index, row}">
            <el-button text type="primary" @click="handleDelete($index, row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <template #footer>
      <el-button type="info" @click="cancel">取消</el-button>
      <el-button type="primary" :loading="saveLoading" @click="save ">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { sellingPricePostcodeDelete, sellingPricePostcodeUpdate, sellingPricePostcodeList } from '@/api/BusinessConfig/sellPriceManagement'
import { validateForm } from '@/utils'

const loading = ref<boolean>(false)
const saveLoading = ref<boolean>(false)
const visible = ref<boolean>(false)
const countryPartitionId = ref<number>()
const formRef = ref()

const formData = reactive({
  tableData: [],
})

const getList = () => {
  loading.value = true
  sellingPricePostcodeList({
    countryPartitionId: countryPartitionId.value,
  }).then(({ code, data }) => {
    if (code === 200) {
      formData.tableData = data
    }
  }).finally(() => {
    loading.value = false
  })
}

const handleDelete = (index, row) => {
  if (row.id) {
    ElMessageBox.confirm('该数据已录在系统, 是否继续删除?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      sellingPricePostcodeDelete(countryPartitionId.value).then(({ code }) => {
        if (code === 200) {
          ElMessage.success('删除成功！')
          getList()
        }
      })
    })
  } else {
    formData.tableData.splice(index, 1)
  }
}

const handleAdd = () => {
  formData.tableData.push({
    postcodeStart: '',
    postcodeEnd: '',
  })
}

const open = (id:number) => {
  countryPartitionId.value = id
  visible.value = true
  getList()
}

const save = () => {
  validateForm(formRef.value, () => {
    const params = {
      countryPartitionId: countryPartitionId.value,
      partitionPostcodeList: formData.tableData,
    }
    saveLoading.value = true
    sellingPricePostcodeUpdate(params).then(({ code }) => {
      if (code === 200) {
        ElMessage.success('保存成功！')
        getList()
      }
    }).finally(() => {
      saveLoading.value = false
    })
  })
}

const cancel = () => {
  formRef.value.resetFields()
  visible.value = false
}

defineExpose({
  open,
})
</script>

<style lang="less" scoped>
.form-item-wrapper{
  margin-bottom: -20px;
  padding:0 20px
}
</style>